<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1400px"
    :close-on-click-modal="false"
    @close="handleDialogClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="150px"
      class="form-container"
    >
      <!-- 基本信息 -->
      <div class="form-section">
        <h3 class="section-title">基本信息</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="核算年份" prop="year">
              <el-input v-model="form.year" placeholder="请输入核算年份" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市" prop="gepCity">
              <el-input v-model="form.gepCity" placeholder="请输入城市名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区县" prop="gepDistrict">
              <el-input v-model="form.gepDistrict" placeholder="请输入区县名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="乡镇" prop="gepTown">
              <el-input v-model="form.gepTown" placeholder="请输入乡镇名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 农业相关参数 -->
      <div class="form-section">
        <h3 class="section-title">农业相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="农业产值">
              <el-input v-model="form.inAgricultural" placeholder="请输入农业产值" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="林业产值">
              <el-input v-model="form.inForestry" placeholder="请输入林业产值" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="牧业产值">
              <el-input v-model="form.inAnimalHusbandry" placeholder="请输入牧业产值" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="渔业产值">
              <el-input v-model="form.inFishery" placeholder="请输入渔业产值" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 能源相关参数 -->
      <div class="form-section">
        <h3 class="section-title">能源相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="生态能源发电量">
              <el-input v-model="form.inEcologicalEnergy" placeholder="请输入生态能源发电量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电价">
              <el-input v-model="form.inElectricityPrice" placeholder="请输入电价" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 水资源相关参数 -->
      <div class="form-section">
        <h3 class="section-title">水资源相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="水资源总量">
              <el-input v-model="form.inWaterResources" placeholder="请输入水资源总量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当地水价">
              <el-input v-model="form.inLocalWaterPrice" placeholder="请输入当地水价" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 保护区相关参数 -->
      <div class="form-section">
        <h3 class="section-title">保护区相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="保护区面积">
              <el-input v-model="form.inProtectedArea" placeholder="请输入保护区面积" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保育成本">
              <el-input v-model="form.inProtectedCost" placeholder="请输入保育成本" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 噪声相关参数 -->
      <div class="form-section">
        <h3 class="section-title">噪声相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="噪声消减量">
              <el-input v-model="form.inNoiseReductionAmount" placeholder="请输入噪声消减量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="噪声降低成本">
              <el-input v-model="form.inNoiseCost" placeholder="请输入噪声降低成本" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 旅游相关参数 -->
      <div class="form-section">
        <h3 class="section-title">旅游相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="旅游收入">
              <el-input v-model="form.inTourismRevenue" placeholder="请输入旅游收入" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 住房相关参数 -->
      <div class="form-section">
        <h3 class="section-title">住房相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="城镇人均住房面积">
              <el-input v-model="form.inHousingAreaPerCapita" placeholder="请输入城镇人均住房面积" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当地房价">
              <el-input v-model="form.inHousePrice" placeholder="请输入当地房价" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 酒店相关参数 -->
      <div class="form-section">
        <h3 class="section-title">酒店相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="酒店客房总数">
              <el-input v-model="form.inHotelRooms" placeholder="请输入酒店客房总数" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客房价格">
              <el-input v-model="form.inRoomPrice" placeholder="请输入客房价格" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 人口相关参数 -->
      <div class="form-section">
        <h3 class="section-title">人口相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="城镇常住人口">
              <el-input v-model="form.inUrbanPopulation" placeholder="请输入城镇常住人口" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年入住率">
              <el-input v-model="form.inOccupancyRate" placeholder="请输入年入住率" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 休闲相关参数 -->
      <div class="form-section">
        <h3 class="section-title">休闲相关参数</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="日休闲游憩时间">
              <el-input v-model="form.inLeisureTime" placeholder="请输入日休闲游憩时间" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="人均工资">
              <el-input v-model="form.inAverageIncome" placeholder="请输入人均工资" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: () => ({})
  },
  submitLoading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'submit', 'close'])

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const dialogTitle = computed(() => {
  return props.isEdit ? '编辑GEP参数' : '新增GEP参数'
})

const formRef = ref()

// 表单数据
const form = reactive({
  id: null,
  year: '',
  gepCity: '',
  gepDistrict: '',
  gepTown: '',
  inAgricultural: '',
  inForestry: '',
  inAnimalHusbandry: '',
  inFishery: '',
  inEcologicalEnergy: '',
  inElectricityPrice: '',
  inWaterResources: '',
  inLocalWaterPrice: '',
  inProtectedArea: '',
  inProtectedCost: '',
  inNoiseReductionAmount: '',
  inNoiseCost: '',
  inTourismRevenue: '',
  inHousingAreaPerCapita: '',
  inHousePrice: '',
  inHotelRooms: '',
  inRoomPrice: '',
  inUrbanPopulation: '',
  inOccupancyRate: '',
  inLeisureTime: '',
  inAverageIncome: ''
})

// 表单验证规则
const rules = {
  year: [
    { required: true, message: '请输入核算年份', trigger: 'blur' }
  ],
  gepCity: [
    { required: true, message: '请输入城市名称', trigger: 'blur' }
  ],
  gepDistrict: [
    { required: true, message: '请输入区县名称', trigger: 'blur' }
  ],
  gepTown: [
    { required: true, message: '请输入乡镇名称', trigger: 'blur' }
  ]
}

// 监听表单数据变化
watch(() => props.formData, (newData) => {
  if (newData && Object.keys(newData).length > 0) {
    Object.keys(form).forEach(key => {
      if (newData[key] !== undefined) {
        form[key] = newData[key]
      }
    })
  }
}, { deep: true, immediate: true })

const resetForm = () => {
  Object.keys(form).forEach(key => {
    if (key === 'id') {
      form[key] = null
    } else {
      form[key] = ''
    }
  })
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

const handleDialogClose = () => {
  resetForm()
  emit('close')
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    emit('submit', form)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.form-container {
  padding: 20px 0;
  max-height: 70vh;
  overflow-y: auto;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fafafa;
}

.section-title {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__wrapper) {
  border-radius: 4px;
}

:deep(.el-button) {
  border-radius: 4px;
}
</style> 